<template>
  <div class="apply-fee">
    <x-header :left-options="{preventGoBack: true}" @on-click-back="back">
        其他费用
    </x-header>
    <group>
      <x-input
        :disabled="status==='完成'"
        type="number"
        v-for="(item, index) in vehicleFees"
        :key="index"
        :title="item.costNames"
        :placeholder="status==='完成' ? '' : `请输入${item.costNames}`"
        v-model="item.money">
      </x-input>
      <!--<x-input title="车辆成本备注" placeholder="请输入车辆成本备注"></x-input>-->
    </group>
    <box gap="30px 15px 15px 15px">
      <x-button v-if="status!=='完成'" @click.native="submit" type="primary">申请确认</x-button>
    </box>
  </div>
</template>

<script>
import {
  XHeader,
  Group,
  XInput,
  XButton,
  Box
} from 'vux'
import {
  getBusinessFees,
  submitBusinessFees
} from '../../api/api'
export default {
  name: 'applyFee',
  components: {
    XButton,
    XHeader,
    Group,
    XInput,
    Box
  },
  data () {
    return {
      allFees: {},
      vehicleFees: [],
      boxId: '',
      status: '',
    }
  },
  mounted () {
    const query = this.$router.currentRoute.query
    this.boxId = query.boxId
    this.status = query.status
    this.$vux.loading.show({
      text: '加载中'
    })
    getBusinessFees({
      boxId: this.boxId
    }).then(res => {
      this.$vux.loading.hide()
      if (res.status === 200) {
        const data = res.data
        this.allFees = data
        let vehicle = data.accounts
        vehicle.forEach((item, index) => {
          if (item.money === 0) {
            vehicle[index].money = ''
          }
        })
        this.vehicleFees = vehicle
      } else {
        this.$vux.toast.text(res.msg)
      }
    })
  },
  methods: {
    submit () {
      // 转化为number类型
      const vehicleFees = this.vehicleFees
      for (let i = 0; i < vehicleFees.length; i++) {
        vehicleFees[i].money = Number(vehicleFees[i].money)
        vehicleFees[i].payingObject = this.$store.state.user.FullName
        vehicleFees[i].unitAccount = '5' // 5-司机
      }
      this.allFees.accounts = vehicleFees
      this.allFees.boxId = this.boxId
      submitBusinessFees(this.allFees).then(res => {
        if (res.status === 200) {
          this.$vux.toast.text('提交成功')
          this.$router.back()
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    },
    back() {
      this.$router.push({
        path: 'bussinessOrder',
        query: {
          status: this.status
        }
      })
    }
  }
}
</script>

<style lang="less">
</style>
